<template>
	<el-col class="control-box" ref="control" :class="[checked ? 'active': '']">
		 <el-checkbox v-model="checked" @change="changeBox"></el-checkbox>
		 <el-col class="img"><img src="http://placehold.it/100x30" alt=""></el-col>
		 <el-col class="text">{{text}}</el-col>
	</el-col>
</template>

<script>
	export default {
		props: ['text', 'index', 'check'],
		data() {
			return {
				checked: false,
			}
		},
		beforeMount() {
			this.check ? this.checked = true: '';
		},
		methods: {
			changeBox() {
				console.log(this.checked)
				this.$refs.control.$el.classList.toggle('active');
				this.$emit('onChange', this.checked, this.index);
			}
		}
	}
</script>

<style scoped>
	.control-box {
		width: 148px;
		height: 148px;
		border-radius: 5px;
		border: 1px solid #ddd;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.control-box.active {
		border-color: #12C286;
	}
	.control-box .img {
		margin: 10px 0;
	}
</style>
